<template>
  <div>
    <!--分页获取数据-->
    <el-table
      :data="
        tableData.listdata.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
      stripestyle="width: 100%"
    >
      <el-table-column prop="Carnum" label="车牌号码" />
      <el-table-column prop="Driver" label="司机姓名" />
      <el-table-column prop="Charge" label="负责人" />
      <el-table-column prop="Brand" label="汽车品牌" />
      <el-table-column prop="Kind" label="汽车型号" />
      <el-table-column prop="Doing" label="汽车用途" />
      <el-table-column prop="Buyplace" label="购车地点" />
      <el-table-column prop="Worthpast" label="资产原值" />
      <el-table-column prop="Worthnow" label="资产现值" />
      <el-table-column prop="Remark" label="备注" />
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="请输入查询内容(车主姓名))"
            @blur="handleSearch"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <!--分页-->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="tableData.listdata.length"
      ></el-pagination>
    </div>
    <!-- 修改信息弹出框 -->
    <CompanyGarage />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import link from "@/api/link.js";
import apiUrl from "@/api/url.js";
import { useStore } from "vuex";
import CompanyGarage from "@/components/CarComponents/CompanyGarage.vue";
let search = ref("");
let store = useStore();
// 分页
const currentPage = ref(1);
const pageSize = ref(5);
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
// 表格数据
const tableData = reactive({
  listdata: [],
});
// 接口数据
interface User {
  date: string;
  name: string;
  address: string;
}
// 获取数据
onMounted(() => {
  link(apiUrl.CompanyVehicles).then((resolve) => {
    tableData.listdata = resolve.data;
  });
  //js调用vuex中的方法
  store.dispatch("COMPANYVEHICLES_LIST");
});
// 搜索
const handleSearch = () => {
  link(apiUrl.CompanyVehicles, "GET", {}, { Driver: search.value }).then(
    (resolve: { data: never[] }) => {
      tableData.listdata = resolve.data;
    }
  );
};
// 编辑
const handleEdit = (index: number, row: User) => {
  store.commit("SET_DIALOG", row);
};
// 删除
const handleDelete = (index: number, row: User) => {
  store.dispatch("DEL_VEHICLES", row);
};
</script>

<style scoped lang="scss">
.container {
  width: 98%;
  margin: 20px auto;
  .bottom {
    margin: 5px;
    .el-pagination {
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
